import styled from 'styled-components'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useSelector } from 'react-redux'
import { RootState } from '../../store'
import Telegram from '../../utils/telegram'
import gtag from '../../google/analytics'
import { GtagEvent } from '../../google/analytics/Event'
import Message from '../../component/Message'
import { throttle } from 'lodash'


const Container = styled.div`
    padding: 1rem;
`

const TextBox = styled.div`
    background-color: #004FFD;
    border-radius: .625rem .625rem 0px 0px;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
`

const Invite = styled.div`
    text-align: center;
    padding: .8125rem 0 .75rem;
    box-sizing: border-box;
    font-weight: 800;
    font-size: 1rem;
    color: #FFFFFF;
    background-color: #01BFBF;
    box-shadow: 0px 1px 10px 0px rgba(0,111,255,0.5);
    border-radius: 10px;
    margin: -1.375rem 4.1875rem 0;
`

const List = styled.ul`
    padding: 0;
    margin: 0;
`

const Item = styled.li`
    display: flex;
    font-weight: bold;
    font-size: 1rem;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    &:nth-child(odd) {
        margin-bottom: .5rem;
    }
    &:nth-child(even) {
        margin-bottom: 1rem;
    }
`

const Header: React.FC = () => {
    const { t } = useTranslation()
    const inviteUrl = useSelector((state: RootState) => state.user.inviteUrl)
    const list = useMemo(() => {
        return [
            t('team.direct'),
            `20%${t('team.cash')}`,
            t('team.indirect'),
            `5%${t('team.cash')}`
        ]
    }, [t])

    const onInvite = () => {
        if (!inviteUrl) {
            Message.error(t('error.invite'))
            return;
        }
        gtag.event(GtagEvent.Invite)

        const inviteURL = `${t('team.referral')}\n${inviteUrl}`
        const message = t('team.share')
        Telegram.share(inviteURL, message);
    }

    return <Container>
        <TextBox>
            <List>
                {list.map((item, idx) => <Item key={idx}>{item}</Item>)}
            </List>
        </TextBox>
        <Invite onClick={throttle(onInvite, 1000)}>
            {t('team.invite')}
        </Invite>

    </Container>
}

export default Header